﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ApprovalControl.ascx.cs"
    Inherits="CarRent.Controls.ApprovalControl" %>
<div id="approval-dialog">
    <div class="row">
        <div class="label">
            Full name:</div>
        <div class="field">
            <label id="lblFullName" />
        </div>
    </div>
    <div class="row">
        <div class="label">
            From time:</div>
        <div class="field">
            <label id="lblFromTime" />
        </div>
        <div class="label">
            To time:</div>
        <div class="field">
            <label id="lblToTime" />
        </div>
    </div>
    <div class="row">
        <div class="label">
            From date:</div>
        <div class="field">
            <label id="lblFromDate" />
        </div>
        <div class="label">
            To date:</div>
        <div class="field">
            <label id="lblToDate" />
        </div>
    </div>
    <div class="row">
        <div class="label">
            Destination:</div>
        <div class="field">
            <label id="lblDestination" />
        </div>
    </div>
    <div class="row">
        <div class="label">
            Purpose:</div>
        <div class="field">
            <label id="lblPurpose" />
        </div>
    </div>
    <div class="row">
        <div class="label">
            Request date:</div>
        <div class="field">
            <label id="lblRequestDate" />
        </div>
    </div>
    <div class="row">
        <div class="label">
            Car:</div>
        <div class="field">
            <asp:DropDownList ID="ddlCar" runat="server" AppendDataBoundItems="true">
                <asp:ListItem Text="- Select a car -" Value="" Selected="True" />
            </asp:DropDownList>
        </div>
    </div>
    <div class="row">
        <div class="label">
            Start (KM):</div>
        <div class="field">
            <input type="text" id="txtStartKM" class="spinner" name="startKm" />
        </div>
        <div class="label">
            End (KM):</div>
        <div class="field">
            <input type="text" id="txtEndKM" class="spinner" name="endKm" />
        </div>
    </div>
    <div class="row">
        <div class="label">
            Depart time:</div>
        <div>
            <input type="text" id="txtDepartDate" class="datepicker from" name="deptDate" />
            <input type="text" id="txtDepartTime" class="timepicker start" name="deptTime" />
            <div class="timepicker_button_trigger start">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="label">
            Arrival time:</div>
        <div>
            <input type="text" id="txtArrivalDate" class="datepicker to" name="arrivalDate" />
            <input type="text" id="txtArrivalTime" class="timepicker end" name="arrivalTime" />
            <div class="timepicker_button_trigger end">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="label">
            Admin remark:</div>
        <div class="field">
            <textarea rows="6" cols="6" id="txtRemark"></textarea>
        </div>
    </div>
</div>
<input type="hidden" id="hidBookingId" />
<input type="hidden" id="hidIsApproval" />
<script type="text/javascript">

    $(document).ready(function () {


        $(".spinner").spinner({
            step: 0.5,
            numberFormat: "n"
        });

        $(".from.datepicker").datepicker({
            //            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 2,
            showOn: "button",
            onClose: function (selectedDate) {
                $(".to.datepicker").datepicker("option", "minDate", selectedDate);

                var compare = compareDiff(selectedDate, $(".to.datepicker").datepicker('getDate'));
                var hour = (compare === 0) ? $('.timepicker.end').timepicker('getHour') : 23;
                var minute = (compare === 0) ? $('.timepicker.end').timepicker('getMinute') : 59;
                $('.timepicker.start').timepicker('option', {
                    maxTime: {
                        hour: hour,
                        minute: minute
                    }
                });
                compare = compareDiff($('.timepicker.start').timepicker('getTimeAsDate'),
                           $('.timepicker.end').timepicker('getTimeAsDate'));
                if (compare < 0) {
                    $('.timepicker.start').timepicker('setTime', $('.timepicker.end').timepicker('getTime'));
                }
            }
        });
        $(".to.datepicker").datepicker({
            //            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 2,
            showOn: "button",
            onClose: function (selectedDate) {
                $(".from.datepicker").datepicker("option", "maxDate", selectedDate);

                var compare = compareDiff($(".from.datepicker").datepicker('getDate'), selectedDate);
                var hour = (compare === 0) ? $('.timepicker.start').timepicker('getHour') : 0;
                var minute = (compare === 0) ? $('.timepicker.start').timepicker('getMinute') : 0;
                $('.timepicker.end').timepicker('option', {
                    minTime: {
                        hour: hour,
                        minute: minute
                    }
                });
                compare = compareDiff($('.timepicker.start').timepicker('getTimeAsDate'),
                           $('.timepicker.end').timepicker('getTimeAsDate'));
                if (compare < 0) {
                    $('.timepicker.end').timepicker('setTime', $('.timepicker.start').timepicker('getTime'));
                }
            }
        });

        $('.timepicker.start').timepicker({
            onSelect: tpStartSelect,
            showOn: 'button',
            button: '.timepicker_button_trigger.start'
        });
        $('.timepicker.end').timepicker({
            onSelect: tpEndSelect,
            showOn: 'button',
            button: '.timepicker_button_trigger.end'
        });

        $('.datepicker').attr('readonly', true);
        $('.timepicker').attr('readonly', true);

        $("#approval-dialog").dialog({
            autoOpen: false,
            title: 'Approve/Edit Booking',
            width: 680,
            modal: false,
            open: function () {
                //                $(this).parent().appendTo($('#ctl01'));
                //                $('#ctl01').validate({
                //                    rules: {
                //                        startKm: {
                //                            required: true
                //                        },
                //                        endKm: {
                //                            required: true
                //                        },
                //                        deptDate: {
                //                            required: true
                //                        },
                //                        deptTime: {
                //                            required: true
                //                        },
                //                        arrivalDate: {
                //                            required: true
                //                        },
                //                        arrivalTime: {
                //                            required: true
                //                        }
                //                    },
                //                    messages: {
                //                        startKm: "!",
                //                        endKm: "!",
                //                        deptDate: "!",
                //                        deptTime: "!",
                //                        arrivalDate: "!",
                //                        arrivalTime: "!"
                //                    }
                //                });
            },
            buttons: [
            {
                text: "Approve",
                "class": 'btnApprove',
                click: function () {
                    var startKM, endKM;
                    if ($('#txtStartKM').val()) {
                        startKM = $('#txtStartKM').val();
                    }
                    if ($('#txtEndKM').val()) {
                        endKM = $('#txtEndKM').val();
                    }
                    var deptDate, arrivalDate;
                    if ($('#txtDepartDate').val()) {
                        deptDate = $('#txtDepartDate').val() + ' ' + $('#txtDepartTime').val();
                    }
                    if ($('#txtArrivalDate').val()) {
                        arrivalDate = $('#txtArrivalDate').val() + ' ' + $('#txtArrivalTime').val();
                    }
                    var carId = null;
                    if ($('#<%=ddlCar.ClientID %> option:selected').val() != '') {
                        carId = $('#<%=ddlCar.ClientID %> option:selected').val();
                    }
                    //                    var valid = $('#ctl01').valid();
                    //                    if (valid) {
                    // Approve code here
                    var booking = {
                        BookingID: $('#hidBookingId').val(),
                        StartKM: startKM,
                        EndKM: endKM,
                        DepartDateTime: deptDate,
                        ArrivalDateTime: arrivalDate,
                        Remark: $('#txtRemark').val(),
                        CarID: carId,
                        IsApproval: true
                    };

                    if (bookingImplement.updateBooking(booking)) {
                        loadBookings(currentPage);
                        $(this).dialog("close");
                    }
                    //                    }
                }
            },
            {
                text: "Save",
                "class": 'btnSave',
                click: function () {
                    var startKM, endKM;
                    if ($('#txtStartKM').val()) {
                        startKM = $('#txtStartKM').val();
                    }
                    if ($('#txtEndKM').val()) {
                        endKM = $('#txtEndKM').val();
                    }
                    var deptDate, arrivalDate;
                    if ($('#txtDepartDate').val()) {
                        deptDate = $('#txtDepartDate').val() + ' ' + $('#txtDepartTime').val();
                    }
                    if ($('#txtArrivalDate').val()) {
                        arrivalDate = $('#txtArrivalDate').val() + ' ' + $('#txtArrivalTime').val();
                    }
                    var carId = null;
                    if ($('#<%=ddlCar.ClientID %> option:selected').val() != '') {
                        carId = $('#<%=ddlCar.ClientID %> option:selected').val();
                    }
                    //                    var valid = $('#ctl01').valid();
                    //                    if (valid) {
                    // Save code here
                    var booking = {
                        BookingID: $('#hidBookingId').val(),
                        StartKM: startKM,
                        EndKM: endKM,
                        DepartDateTime: deptDate,
                        ArrivalDateTime: arrivalDate,
                        Remark: $('#txtRemark').val(),
                        CarID: carId,
                        IsApproval: $('#hidIsApproval').val()
                    };

                    if (bookingImplement.updateBooking(booking)) {
                        loadBookings(currentPage);
                        $(this).dialog("close");
                    }

                    //                    }
                }
            },
            {
                text: "Cancel",
                "class": 'btnCancel',
                click: function () {
                    // Cancel code here
                    $(this).dialog("close");
                }
            }
        ],
            close: function () {
            }
        });
    });

    function loadBookingData(booking) {
        $('#lblFullName').text(booking.FullName);
        $('#lblFromTime').text(booking.FromTime);
        $('#lblToTime').text(booking.ToTime);
        $('#lblFromDate').text(booking.FromDate);
        $('#lblToDate').text(booking.ToDate);
        $('#lblDestination').text(booking.Destination);
        $('#lblPurpose').text(booking.Purpose);
        $('#lblRequestDate').text(booking.RequestDate);
        $('#txtStartKM').val(booking.StartKM);
        $('#txtEndKM').val(booking.EndKM);
        $('#txtDepartDate').val(booking.DepartDate);
        $('#txtArrivalDate').val(booking.ArrivalDate);
        $('#txtDepartTime').val(booking.DepartTime);
        $('#txtArrivalTime').val(booking.ArrivalTime);
        $('#txtRemark').val(booking.Remark);
        $('#hidBookingId').val(booking.BookingID);
        $('#hidIsApproval').val(booking.IsApproval);
        $('#<%=ddlCar.ClientID %>').val(booking.CarID);
    }

    // when start time change, update minimum for end timepicker
    function tpStartSelect(time, endTimePickerInst) {
        var compare = compareDiff($('.from.datepicker').datepicker('getDate'), $('.to.datepicker').datepicker('getDate'));
        var hour = (compare === 0) ? endTimePickerInst.hours : 0;
        var minute = (compare === 0) ? endTimePickerInst.minutes : 0;
        $('.timepicker.end').timepicker('option', {
            minTime: {
                hour: hour,
                minute: minute
            }
        });
    }

    // when end time change, update maximum for start timepicker
    function tpEndSelect(time, startTimePickerInst) {
        var compare = compareDiff($('.from.datepicker').datepicker('getDate'), $('.to.datepicker').datepicker('getDate'));
        var hour = (compare === 0) ? startTimePickerInst.hours : 23;
        var minute = (compare === 0) ? startTimePickerInst.minutes : 59;
        $('.timepicker.start').timepicker('option', {
            maxTime: {
                hour: hour,
                minute: minute
            }
        });
    }

    function compareDiff(startDate, endDate) {
        var difference = (endDate - startDate) / (86400000);
        return difference;
    }
</script>
